<template>
  <view class="link-page">
    <u-status-bar></u-status-bar>
    <!-- 顶部搜索栏 -->
    <view class="search-header">
      <view class="search-container">
        <view class="search-input-wrapper">
          <up-icon name="search" size="16" color="#999"></up-icon>
          <input class="search-input" :placeholder="useT('输入关键字搜索')" v-model="searchKeyword" @input="onSearchInput" />
          <view class="clear-btn" v-if="searchKeyword" @click="clearSearch">
            <up-icon name="close" size="14" color="#999"></up-icon>
          </view>
        </view>
        <text class="cancel-btn" @click="cancelSearch">{{ useT('取消') }}</text>
      </view>
      <view class="my-miniprogram-btn" @click="goToMyMiniprogram">{{ useT('我的小程序') }}</view>
    </view>

    <!-- Web3支付推广横幅 -->
    <view class="promotion-banner">
      <view class="banner-content">
        <view class="banner-text">
          <text class="banner-title">{{ useT('欢迎优质项目入驻小程序') }}</text>
          <text class="banner-subtitle">{{ useT('共享Web3支付流量') }}</text>
          <text class="banner-link">{{ useT('请联系平台客服') }}</text>
        </view>
        <view class="banner-icon">
          <image src="@/static/home/icon-01.png" class="crypto-icon" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <!-- 便民生活分类 -->
    <view class="category-section">
      <text class="category-title">{{ useT('便民生活') }}</text>
      <view class="app-grid">
        <view class="app-item" v-for="(item, index) in convenientApps" :key="index" @click="openApp(item)">
          <view class="app-icon grab">
            <text class="app-text">Grob</text>
          </view>
          <text class="app-name">Grab</text>
        </view>
      </view>
    </view>

    <!-- 理财管理分类 -->
    <view class="category-section">
      <text class="category-title">{{ useT('理财管理') }}</text>
      <view class="app-grid">
        <view class="app-item" v-for="(item, index) in financeApps" :key="index" @click="openApp(item)">
          <view class="app-icon okx">
            <text class="okx-logo">OKX</text>
          </view>
          <text class="app-name">OKX</text>
        </view>
      </view>
    </view>

    <!-- 自定义 Tabbar -->
    <CustomTabbar :currentIndex="2" />
  </view>
</template>

<script setup>
import CustomTabbar from '@/components/CustomTabbar.vue';
import { useT } from '@/utils/i18n';
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

// 响应式数据
const searchKeyword = ref('');

// 便民生活应用数据
const convenientApps = ref(Array(12).fill({ name: 'Grab', type: 'convenient' }));

// 理财管理应用数据
const financeApps = ref(Array(8).fill({ name: 'OKX', type: 'finance' }));

onShow(() => {
  console.log('onShow');
  uni.hideTabBar();
});

// 方法定义
// 搜索输入处理
const onSearchInput = () => {
  console.log('搜索关键词:', searchKeyword.value);
};

// 清除搜索
const clearSearch = () => {
  searchKeyword.value = '';
};

// 取消搜索
const cancelSearch = () => {
  searchKeyword.value = '';
  uni.hideKeyboard();
};

// 跳转到我的小程序
const goToMyMiniprogram = () => {
  uni.showToast({
    title: '我的小程序功能开发中',
    icon: 'none'
  });
};

// 打开应用
const openApp = (app) => {
  uni.showToast({
    title: `打开${app.name}`,
    icon: 'none'
  });
};
</script>

<style lang="scss" scoped>
.link-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding-bottom: 120rpx; /* 为 tabbar 留出空间 */
}

// 顶部搜索栏
.search-header {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;

  .search-container {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .search-input-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      background-color: #f8f9fa;
      border-radius: 25rpx;
      padding: 15rpx 20rpx;
      margin-right: 20rpx;

      .search-input {
        flex: 1;
        margin-left: 10rpx;
        font-size: 28rpx;
        color: #333;
        background: transparent;
        border: none;
        outline: none;
      }

      .clear-btn {
        margin-left: 10rpx;
        padding: 5rpx;
      }
    }

    .cancel-btn {
      font-size: 28rpx;
      color: #666;
    }
  }

  .my-miniprogram-btn {
    width: 100%;
    height: 70rpx;
    background-color: #12c284;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 500;
  }
}

// 推广横幅
.promotion-banner {
  margin: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .banner-text {
      flex: 1;

      .banner-title {
        display: block;
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        margin-bottom: 10rpx;
      }

      .banner-subtitle {
        display: block;
        font-size: 24rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .banner-link {
        display: block;
        font-size: 24rpx;
        color: #12c284;
        text-decoration: underline;
      }
    }

    .banner-icon {
      display: flex;
      align-items: center;
      justify-content: center;

      .crypto-icon {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
}

// 分类区域
.category-section {
  margin: 40rpx 30rpx;

  .category-title {
    display: block;
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 30rpx;
  }

  .app-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .app-item {
      width: 22%;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .app-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10rpx;

        &.grab {
          background-color: #12c284;

          .app-text {
            color: #ffffff;
            font-size: 24rpx;
            font-weight: 600;
          }
        }

        &.okx {
          background-color: #000000;

          .okx-logo {
            color: #ffffff;
            font-size: 20rpx;
            font-weight: bold;
            letter-spacing: 1rpx;
          }
        }
      }

      .app-name {
        font-size: 24rpx;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style>
